<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue事件简写和事件对象</title>
	<script src="vue/vue.js"></script>
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
	<script src="jquery/jquery.min.js" ></script>
	<script src="bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript">
		Vue.config.keyCode={
			a:65,
			f1:112
		}
		window.onload=function(){
			new Vue({
				el:'.container',
				data:{

				},
				methods:{
					getInfo(e){
						console.log(11111);
						console.log(e.target.innerHTML);
						// e.stopPropagation();//原生js阻止事件冒泡
					},
					write(){
						console.log(333);
					},
					print(){
						console.log(222);
					},
					study(e){
						console.log(666);
						//e.preventDefault();//原生js阻止
					},
					show(e){
						console.log(e.keyCode);
						if(e.keyCode==13){
							console.log("你按了Enter键");
						}
					},
					show1(){
						console.log("你按了Enter键");
					}
				}
			});
		}
	</script>
	
</head>
<body>
	<div class="container">
		<div @click="write">
			<p @click="print">
				<!-- 事件对象 $event -->
				<!-- <button class="btn btn-primary" @click="getInfo($event)">点我</button> -->
				<button class="btn btn-primary" @click.stop="getInfo($event)">点我</button>
			</p>
		</div>
	<hr>
	<!-- 事件默认行为 -->
	<!-- <a href="#" @click="study($event)">我是链接</a> -->
		<a href="#" @click.prevent="study()">我是链接</a>
	<hr>
	<h3>键盘事件</h3>
	<!-- 简化键盘按键的判断 -->
	js原生的按键判断：<input type="text" class="input-sm" @keydown="show($event)"><br>
	vue简化后的按键判断：<input type="text" class="input-sm" @keydown.f1="show1()">
	</div>


</body>
</html>